<template>
  <div class="pager-container" v-if="pageNumber>1">
      <a @click="handleClick(1)" :class="{disabled:current===1}">|&lt;&lt;</a>
      <a @click="handleClick(current===1?1:current-1)" :class="{disabled:current===1}">&lt;&lt;</a>
      <a
        @click="handleClick(n)"  
        v-for="(n,i) in numbers" 
        :key="i" 
        :class="{active:n===current}">
        {{n}}
      </a>
      <a @click="handleClick(current+1)" :class="{disabled:current===pageNumber}">&gt;&gt;</a>
      <a @click="handleClick(pageNumber)" :class="{disabled:current===pageNumber}">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
    props:{
        current:{//当前页码
            type:Number,//类型
            default:1,//默认值
        },
        total:{//总数据量
            type:Number,
            default:0,
        },
        limit:{//页容量
            type:Number,
            default:10,
        },
        visibleNumber:{//可见页码数
            type:Number,
            default:10,
        }
    },
    computed:{
        pageNumber(){
            return Math.ceil(this.total/this.limit);
        },
        visibleMin(){//显示出来的最小页码
            let min = this.current - Math.floor(this.visibleNumber/2);
            if(min<1){
                min=1;
            }
            return min;
        },
        visibleMax(){//显示出来的最大页码
            let max = this.visibleMin + this.visibleNumber -1;
            if(max>this.pageNumber){
                max=this.pageNumber;
            }
            return max;
        },
        numbers(){
            let nums = [];
            for(let i=this.visibleMin;i<=this.visibleMax;i++){
                nums.push(i);
            }
            return nums;
        }
    },
    methods:{
        handleClick(newPage){
            //抛出一个事件
            // console.log(e);
            //抛出一个事件$emit,实例对象
            // console.log(newPage);
            this.$emit("pageChange",newPage);
        },
    },
}
</script>

<style  scoped lang="less">
    .pager-container{
        display: flex;
        margin: 20px 0px;
        justify-content: center;
        a{
            width: 30px;
            height: 10px;
            cursor: pointer;
            color: #6b9eee;
            &.disabled{
                color: #999;
                cursor: not-allowed;
            }
            &.active{
                color: #202020;
                font-weight: 700;
                cursor: text;
            }
        }
    }
</style>